import React, { useRef, useState } from 'react'
import { Button, message, Table, Image, Switch, Tag } from 'antd'

import * as XLSX from 'xlsx';


export default function Index() {

    const inpRef = useRef()

    const [proList, setProList] = useState([])

    const changeFile = (e) => {
        // 如果第一次选择了内容，第二次取消了，那么就返回
        if (e.target.files.length <= 0) {
            message.error('您取消文件选择了')
            return
        }

        // 还要判断文件的类型
        console.log(e.target.files[0]);

        // 1. 获取到我们选中的文件
        const file = e.target.files[0]

        // 2. 创建一个文件的加载器
        const reader = new FileReader()

        // 3. 将文件读取成数据流
        reader.readAsBinaryString(file)
        // 读取文件成功之后的回调函数
        reader.onload = () => {
            // console.log(reader.result);
            // 4. 将数据流转换成 js 对象，这里的 js 对象是所有的工作表
            const box = XLSX.read(reader.result, { type: 'binary' })

            // 5. 取出我们需要的工作表数据
            let res = box.Sheets['工作表1']

            // 6. 将工作表中的数据转换成 json 对象，做页面渲染
            res = XLSX.utils.sheet_to_json(res)

            // console.log(res);
            setProList(res)
        }
    }


    const [current, setCurrent] = useState(1)

    const columns = [
        {
            title: '序号',
            render(t, r, i) {
                return <Tag>{(current - 1) * 10 + i + 1}</Tag>
            }
        }, {
            title: '商品名称',
            dataIndex: 'proname',
            width: 300
        }, {
            title: '商品图片',
            dataIndex: 'img1',
            render(t) {
                return <Image style={{ width: 80 }} src={t} />
            }
        }, {
            title: '商品分类',
            dataIndex: 'category',
        }, {
            title: '商品价格',
            dataIndex: 'originprice',
            sorter: (a, b) => a.originprice - b.originprice,
        }, {
            title: '商品折扣',
            dataIndex: 'discount',
            sorter: (a, b) => a.discount - b.discount,
        }, {
            title: '是否推荐',
            dataIndex: 'isrecommend',
            render(t) {
                return <Switch defaultChecked={t} />
            }
        }, {
            title: '是否售卖',
            dataIndex: 'issale',
            render(t, r) {
                return <Switch defaultChecked={t} />
            }
        }, {
            title: '是否秒杀',
            dataIndex: 'isseckill',
            render(t, r) {
                return <Switch defaultChecked={t} />
            }
        }
    ]
    return (
        <div>
            <h2>
                文件导入
                <input hidden onChange={changeFile} ref={inpRef} type="file" />
                <Button onClick={() => { inpRef.current.click() }}>导入</Button>
            </h2>

            <Table
                locale={{
                    triggerDesc: '点击降序',
                    triggerAsc: '点击升序',
                    cancelSort: '取消排序',
                    filterConfirm: '确定',
                    filterReset: '重置',
                }}
                scroll={{ y: 500 }}
                pagination={{
                    current,
                    onChange(page) {
                        setCurrent(page)
                    }
                }}
                rowKey={'proname'}
                dataSource={proList}
                columns={columns} />

        </div>
    )
}
